<template>
<div class="product-box">
  <div class="search-container">
    <el-input style="width: 250px;"  v-model="searchParams.object.productName" placeholder="请输入产品名称"></el-input>
    <el-select style="margin: 0 20px" v-model="searchParams.object.type" placeholder="请选择产品类型">
      <el-option label="IOF" value="iof"></el-option>
      <el-option label="定投行" value="dingtou"></el-option>
      <el-option label="ETF" value="etf"></el-option>
      <el-option label="混合型" value="hunhe"></el-option>
    </el-select>
    <el-button @click="search()"  type="primary"> <i class="el-icon-search"></i>查询</el-button>
    <el-button @click="reset()"  type="info"><i class="el-icon-refresh"></i>重置</el-button>
  </div>
  <div class="product-content">
    <el-empty v-if="lists.length === 0" description="空空如也"></el-empty>
    <el-skeleton v-loading="loading" class="item" v-for="item in lists" :key="item.id" :loading="loading" animated :count="3">
      
      <template>
        <el-card style="margin: 20px 0;" :body-style="{ padding: '0px', marginBottom: '1px' }" >
          <img :src="getImgURL(item.img)" class="image multi-content img " />
          <div style="padding: 14px;">
            <span>{{ item.productName }}</span>
            <div class="bottom card-header">
              <span class="time" style="font-weight: lighter;">{{ item.createTime }}</span>
            </div>
            <el-button @click="openDialog(item)" type="text" class="button" >查看详情</el-button>
          </div>
        </el-card>
      </template>
    </el-skeleton>
    <el-dialog @close="resetDialog"  :title="dialogItem.name"  :visible.sync="defaultVision" :show-close="true" >
      <el-descriptions title="产品信息">
        <el-descriptions-item label="产品名称">{{ dialogItem.productName }}</el-descriptions-item>
        <el-descriptions-item label="月收入级别">
          <el-tag size="small">{{ dialogItem.monthlyIncome }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="产品年利率">{{dialogItem.rate * 100 + '%'}}</el-descriptions-item>
        <el-descriptions-item label="风险偏好">{{ dialogItem.risk}}</el-descriptions-item>
        <el-descriptions-item label="投资经验">{{ dialogItem.exp}}</el-descriptions-item>
        <el-descriptions-item label="产品类型">{{ dialogItem.type }}</el-descriptions-item>
      </el-descriptions>
      <el-form :inline="true" ref="form"  :model="myForm" class="form"  :rules="rules" >
        <el-form-item prop="year" label="年数">
          <el-input-number   v-model="myForm.year" :min="1" label="年数"></el-input-number>
        </el-form-item>
        <el-form-item prop="amount" style="width: 300px;"  label="理财金额">
          <el-input placeholder="请输入金额" v-model.number="myForm.amount"></el-input>
        </el-form-item>
        <el-form-item style="">
          <el-button @click="submit()" type="primary">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
 <div class="page-bar">
   <el-pagination
     @current-change="pageHandler"
     @next-click="pageNext"
     @prev-click="pagePre"
     :current-page="this.searchParams.currentPage"
     layout="prev, pager, next"
     :total="searchParams.totalPage * 10">
   </el-pagination>
 </div>
</div>
</template>
<script>
import axios from "axios";
axios.defaults.withCredentials = true
export default {
  name: "Product",
  computed: {
    userId(){
      return localStorage.getItem("UID")
    }
  },
  data(){
    return{
      assets:parseInt(localStorage.getItem("assets")),
      rules: {
        amount: [
          { required: true, message: '请输入金额', trigger: 'blur' },
        ]
      },
      myForm:{
        productId:0,
        userId:localStorage.getItem("UID"),
        amount:'',
        year:1,
        status:0,
        rate: 0
      },
      loading: false,
      currentDate: '2023-7-23',
      searchParams: {
        object: {
          productName: '',
          type: ''
        },
        currentPage: 1,
        pageSize: 8,
        totalPage: 0
      },
      lists: [],
      dialogItem:{},
      defaultVision: false,
      record:[]
      
    }
  },
  methods: {
    initList(){
      this.loading = true
      axios.post('/FinancialRecommend/product/page',this.searchParams)
      .then(response => {
        this.lists = response.data.data.pageList
        this.searchParams.totalPage = response.data.data.totalPage
      })
      //加载动画
      setTimeout(() => {
        this.loading = false
      },500)
    },
    //当点击页码时，被点击的页码会传入该函数，并赋值给 this.searchParams.currentPage
    pageHandler(newPage){
      this.searchParams.currentPage = newPage
      this.initList()
    },
    getImgURL(url){
      return 'http://localhost:8888/FinancialRecommend' + url
    },
    pageNext(){
      this.searchParams.currentPage++
      this.initList()
    },
    pagePre(){
      this.searchParams.currentPage--
      this.initList()
    },
    search(){
      this.initList()
    },
    reset(){
      this.searchParams.object.type = ""
      this.searchParams.object.productName = ""
      this.initList()
    },
    //打开对话框
    openDialog(item){
      this.defaultVision = true
      this.dialogItem = item
      //先判断是否有该对象
      let flag = true
      for (let i = 0; i < this.record.length; i++){
        if (this.record[i].productId === item.productId){
          this.record[i].recordCount++
          flag = false
        }
      }
      //默认情况下，使会添加的，但如果在上面的循环中 发现了有相同productId的记录，
      // 那就直接给recordCount++就可以了，就不用再添加对象了
      if (flag){
        this.record.push({
          userId: this.userId,
          productId: item.productId,
          productType:item.type,
          recordCount:1
        })
      }
     
    },
    //提交订单
    submit(){
      debugger
      if (this.myForm.amount === 0 || this.myForm.amount === '') {
        this.$message({
          message:'金额不能为空',
          type: 'error'
        })
      }else if(this.myForm.amount > this.assets || this.myForm.amount <= 0){
        this.$message({
          message:'金额不能大于自己的资产且不能为负数',
          type: 'error'
        })
      }else{
        this.myForm.rate = this.dialogItem.rate
        this.myForm.productId = this.dialogItem.productId
        axios.post("/FinancialRecommend/order/render",this.myForm)
          .then(response => {
            this.$message({
              message: response.data.msg,
              type: 'success'
            })
            this.defaultVision = false
          })
      }
    },
    //重置对话框
    resetDialog(){
      this.myForm.year = 1
      this.myForm.amount = ''
    }
  },
  created() {
    this.initList()
  },
  beforeDestroy() {
    console.log('进入了beforeDestroy生命周期')
    console.log(this.record)
    if (this.record.length !== 0){
      axios.post('/FinancialRecommend/user/record',this.record)
        .then(response => {
          console.log(response.data.msg)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.product-box{
  width: 90%;
  margin: auto auto -55px auto;
  padding-top: 71px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.search-container{
  display: flex;
  margin: 30px 0;
  justify-content: center;
}
.product-content{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.item{
  width: 300px;
  height: 300px;
  margin: 40px 20px;
}
.img{
  width: 300px;
  height: 230px;
}
.page-bar{
  width: 100%;
  height: 50px;
  margin: 58px 0;
  /*background-color: red;*/
  display: flex;
  justify-content: center;
}
.form{
  display: flex;
  padding: 20px;
  box-sizing: border-box;
}
</style>
